<template>
  <div class='chart-wrap'>
    <div ref="chartRef" class="chart-content"></div>
  </div>
</template>
<script lang="ts" setup>
   import { ref, defineProps, watch,shallowRef,onUnmounted,nextTick } from "vue";
   import * as echarts from 'echarts';
   import {toFixPercent,toWanUnit} from "/@/utils/func";
  const props = defineProps({
    colorS:{
      type:Object,
      default:{
        axisColor: '#DCF7D8',
        gradientStart: '#2EB82E',
        gradientEnd: '#9DEB87' ,
      }
    },
    progressData:{
      type:Object,
      default:()=>{}
    }
  })

  const option = {
    grid: {
      left: '0%',
      right: '1%',
      bottom: '0%',
      containLabel: true
    },
    series: [
      {
        type: 'gauge',
        center: ['50%', '50%'],
        radius:'100%',
        startAngle: 180,
        endAngle: 0,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          width :14,
          roundCap: true,
          clip: false,
          itemStyle: {
            color:{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0.21, color: props.colorS.gradientStart // 0% 处的颜色
              }, {
                  offset: 0.98, color: props.colorS.gradientEnd // 100% 处的颜色
              }],
            },
          }
        },
        axisLine: {
          show:true,
          lineStyle: {
            width: 14,
            color:[[1, props.colorS.axisColor]]
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 10
        },
        title: {
          fontSize: 14,
          color: "#666666",
          lineHeight:20,
        },
        detail: {
          fontSize: 16,
          color: props.colorS.gradientStart,
          fontWeight:"bold",
          formatter: '{value}%'
        },
        data:[
          {
            value: 10,
            name: '资金利用率',
            title: {
              offsetCenter: ['0%', '-20%']
            },
            detail: {
              valueAnimation: true,
              offsetCenter: ['0%', '-50%']
            }
          }
        ]
      }
    ]
  };
  const utilRate = ref(0);
  const echartsInstance = shallowRef(null);
  const chartRef = shallowRef();
  const initChart = ()=>{
    echartsInstance.value = null;
    echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
    option.series[0].data[0].value = utilRate.value
    echartsInstance.value.setOption(option,true)
    window.addEventListener('resize', resize)
  }
  const resize = () =>{
    if(echartsInstance.value){
      echartsInstance.value?.resize()
    }
  }
  onUnmounted(() => {
    // 组件卸载时销毁图表实例
    if(echartsInstance.value){
      echartsInstance.value.dispose();
    }
  });

  watch(() => props.progressData,(newValue)=>{
    if(newValue?.projectSectionStatictisDto?.approvalAmount){
      const denominator = newValue?.projectSectionStatictisDto?.approvalAmount;
      const numerator = toWanUnit(newValue?.projectSectionStatictisDto?.contractAmount) + toWanUnit(newValue?.projectSectionStatictisDto?.investmentAdditionalFee);
      utilRate.value = toFixPercent(numerator/denominator);
      nextTick(() => {
        initChart()
        resize()
      })
    }
    else{
      utilRate.value = 0;
    }
  },
  {
    deep: true,
    immediate: true
  })
</script>

<style lang="scss" scoped>
  .chart-wrap{
    width: 200px;
    height: 70px;
    overflow: hidden;
    .chart-content{
      width: 200px;
      height: 150px;
    }
  }

</style>


